import { ref, computed, readonly, onMounted, onUnmounted } from 'vue'

export const useResponsive = () => {
  const windowWidth = ref(0)
  const windowHeight = ref(0)

  const updateSize = () => {
    windowWidth.value = window.innerWidth
    windowHeight.value = window.innerHeight
  }

  onMounted(() => {
    updateSize()
    window.addEventListener('resize', updateSize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateSize)
  })

  const isMobile = computed(() => windowWidth.value <= 768)
  const isTablet = computed(() => windowWidth.value > 768 && windowWidth.value <= 1024)
  const isDesktop = computed(() => windowWidth.value > 1024)
  const isSmallMobile = computed(() => windowWidth.value <= 480)

  return {
    windowWidth: readonly(windowWidth),
    windowHeight: readonly(windowHeight),
    isMobile: readonly(isMobile),
    isTablet: readonly(isTablet),
    isDesktop: readonly(isDesktop),
    isSmallMobile: readonly(isSmallMobile)
  }
}